<template>
	<view class="container">
		<view class="balance-list">
			<view class="balance-item f-c-between" v-for="(item,i) in netList" :key="item.id">
				<view class="item-left">
					<view class="label f-a-center">{{item.memo}}
						<!-- <view v-if="i==2" class="not">未到账</view> -->
					</view>
					<view class="time">{{item.createtime|date('yyyy-mm-dd hh:MM:ss')}}</view>
				</view>
				<view class="item-right" :style="{color:parseFloat(item.money)>0?'#FF6413':'#5FCB34'}">
					<span v-if="parseFloat(item.money)>0">+</span>
					{{item.money}}
				</view>
			</view>
		</view>
		<u-loadmore line :status="loadStatus" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				netList: [],
				params: {
					page: 1,
					limit: 20,
					total: 0
				}
			}
		},
		filters: {
			timeParams: function(num) {
				return this.$util.timeUtil.timeFormat(num);
			}
		},
		computed: {
			loadStatus() {
				if (this.netList.length == 0) return ""
				if (this.netList.length < this.params.total) return 'loadmore'
				if (this.netList.length == this.params.total) return "nomore"
			}
		},
		onLoad() {
			this.getNetList()
		},
		methods: {
			//获取明细列表
			getNetList() {
				this.$api.get_wechat_moneylog(this.params).then(res => {
					let {
						list,
						total
					} = res
					this.netList = this.netList.concat(list || [])
					this.params.total = total
				})
			},

			async onRefreshData() {
				this.params.page = 1
				this.netList = []
				await this.getNetList()
			}
		},
		async onPullDownRefresh() {
			await this.onRefreshData()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.netList.length >= this.params.total) {
				return
			}
			this.params.page++
			this.getNetList()
		}
	}
</script>

<style>
	page {
		background-color: #F4F7F7;
	}
</style>
<style lang="scss" scoped>
	.container {
		padding-bottom: 20rpx;
	}

	.balance-list {
		background: #FFFFFF;
		padding: 0 42rpx;

		.balance-item {
			padding: 28rpx 2rpx 30rpx 2rpx;
			border-bottom: 1px solid #ededed;

			&:last-child {
				border-bottom: 0;
			}

			.item-left {

				.label {
					font-weight: 400;
					// font-size: 26rpx;
					font-size: calc(26rpx * 1.4);
					color: #333333;

					.not {
						font-weight: 400;
						font-size: 18rpx;
						color: #FF6413;
						width: 70rpx;
						height: 26rpx;
						line-height: 26rpx;
						border-radius: 4rpx;
						border: 1px solid #FF6413;
						text-align: center;
						margin-left: 28rpx;
					}
				}

				.time {
					font-weight: 400;
					// font-size: 24rpx;
					font-size: calc(24rpx * 1.4);
					color: #A1A1A1;
					margin-top: 8rpx;
				}
			}

			.item-right {
				font-weight: 400;
				// font-size: 32rpx;
				font-size: calc(32rpx * 1.4);
				color: #FF6413;
			}
		}
	}
</style>